<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="div1" class="class-div1"></div>
    <div class="class-div1"></div>
    <br>
    <div id="div2"></div>
    <script src="./dist/demo.js"></script>
    <script>
        console.log(window.showMsg);
        var countdownTimeSec1 = 10;
        var countdownTimeSec2 = 8;

        var oShowTime1 = document.getElementById('div1');
        var oShowTime2 = document.getElementById('div2');

        new Countdown({
            showTimeElement: '.class-div1',
            serverTimestamp: new Date().getTime(),
            startTimestamp: (new Date().getTime() / 1000 + countdownTimeSec1) * 1000,
            showTimeSymbol: {
                day: '天',
                hour: '时',
                min: '分',
                sec: '秒'
            },
            // showtime: function (time) {
            //     oShowTime1.innerHTML = time.day + '天' + time.hour + '小时' + time.min + '分' + time.sec + '秒';
            // },
            timeup: function () {
                console.log('时间到1');
            }
        });

        // new Countdown({
        //     showTimeElement: 'div2',
        //     serverTimestamp: new Date().getTime(),
        //     startTimestamp: (new Date().getTime() / 1000 + countdownTimeSec2) * 1000,
        //     showtime: function (time) {
        //         console.log(time);
        //     },
        //     timeup: function () {
        //         console.log('时间到2');
        //     }
        // });

        function Countdown(options) {

            this.options = options || {};
            this.timer = null;
            this.newTimeSecond = null;
            this.showTimeElement = null;
            this.sDay = '';
            this.sHour = '';
            this.sMin = '';
            this.sSec = '';

            this.init = function () {
                this.options.serverTimestamp = options.serverTimestamp || new Date().getTime();
                this.options.startTimestamp = options.startTimestamp || 0;
                this.options.showTimeElement = options.showTimeElement || '';
                this.options.showTimeSymbol = options.showTimeSymbol || {};

                this.sDay = this.options.showTimeSymbol.day;
                this.sHour = this.options.showTimeSymbol.hour;
                this.sMin = this.options.showTimeSymbol.min;
                this.sSec = this.options.showTimeSymbol.sec;

                if (!/^\d{13}$/.test(this.options.startTimestamp)) return;

                if (this.options.showTimeElement) {
                    var oShowTimeElement = document.querySelectorAll(this.options.showTimeElement);
                    if (oShowTimeElement && oShowTimeElement.length) {
                        this.showTimeElement = oShowTimeElement;
                    }
                }

                this.newTimeSecond = parseInt(new Date(this.options.serverTimestamp).getTime() / 1000);

                this.setTime();
            };

            this.setTime = function () {
                var _this = this;
                var oServerTime = new Date(this.options.serverTimestamp);
                var oStartTime = new Date(this.options.startTimestamp);
                var oYear = oStartTime.getFullYear();
                var oMonth = oStartTime.getMonth() + 1;
                var oDay = oStartTime.getDay();
                var oHour = oStartTime.getHours();
                var oMin = oStartTime.getMinutes();
                var oSec = oStartTime.getSeconds();

                oServerTime.setFullYear(oYear, oMonth, oDay);
                oServerTime.setHours(oHour, oMin, oSec);

                this.timeRun(oStartTime);

                this.timer = setInterval(function () {
                    _this.timeRun(oStartTime);
                }, 1000);

            };

            this.timeRun = function (oStartTime) {
                // 秒数++
                this.newTimeSecond++;
                // 算出新的时间差
                var x = parseInt(String((oStartTime.getTime() - new Date(this.newTimeSecond * 1000).getTime()) /
                    1000));
                var d = parseInt(String(x / 86400));
                x %= 86400;
                var h = parseInt(String(x / 3600));
                x %= 3600;
                var m = parseInt(String(x / 60));
                x %= 60;

                this.options.showtime && this.options.showtime({
                    day: this.addZero(d),
                    hour: this.addZero(h),
                    min: this.addZero(m),
                    sec: this.addZero(x)
                });

                if (this.showTimeElement && this.showTimeElement.length) {
                    for (var i = 0; i < this.showTimeElement.length; i++) {

                        var sShowTime = '';
                        var sDay = this.sDay ? this.addZero(d) + this.sDay : '';
                        var sHour = this.sHour ? this.addZero(h) + this.sHour : '';
                        var sMin = this.sMin ? this.addZero(m) + this.sMin : '';
                        var sSec = this.sSec ? this.addZero(x) + this.sSec : '';
                        sShowTime = sDay + sHour + sMin + sSec;

                        this.showTimeElement[i] && (this.showTimeElement[i].innerHTML = sShowTime);
                    }
                }

                if (d === 0 && h === 0 && m === 0 && x === 0) {
                    // 时间到，停止倒计时
                    clearInterval(this.timer);
                    if (this.showTimeElement && this.showTimeElement.length) {
                        for (var i = 0; i < this.showTimeElement.length; i++) {
                            this.showTimeElement[i] && (this.showTimeElement[i].innerHTML = '00:00:00');
                        }
                    }
                    this.options.timeup && this.options.timeup();
                }
            };

            this.addZero = function (num) {
                if (num === 'undefined' || num === undefined || num === '' || num === null) return;
                var newNum = typeof num === 'number' ? num : parseInt(num);
                return newNum > 9 ? newNum : ('0' + newNum);
            };

            this.init();
        }
    </script>
</body>

</html>